<template>
	<view class="content">
		<view>
			<view class="tab">    
				<view class="tabItem" :class="{'active' : 0 == tab_current}" @click="clickTab(0)">
					<text :class="{'borderline' : 0 == tab_current}">在读</text>
				</view>
				<view class="tabItem" :class="{'active' : 1 == tab_current}" @click="clickTab(1)">
					<text :class="{'borderline' : 1 == tab_current}">想读</text>
				</view>
				<view class="tabItem" :class="{'active' : 2 == tab_current}" @click="clickTab(2)">
					<text :class="{'borderline' : 2 == tab_current}">读过</text>
				</view>
			</view>
			<view class="itemcar" v-show="tab_current == 0">
				<!-- 在读 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltobottom"
				>
					<view v-for="(zaidu,index) in zaidus" :key="index">
						<navigator class="item" :url="'../books/bookinfo?bookid=' + zaidu.books.book_id + '&bookname=' + zaidu.books.book_name">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + zaidu.books.bimg_m"></image>
							<view class="text-area">
								<text class="bookname" selectable="true" user-select="true">{{zaidu.books.book_name}}</text>
								<text class="other" selectable="true" user-select="true">{{zaidu.books.zuozhe}} | {{zaidu.books.chubanshe}} </text>
								<view class="beizhu">
									<text class="riqi">{{formatDate(zaidu.add_time)}}</text>
									<text class="memo">{{zaidu.memo}}</text>
								</view>
							</view>
						</navigator>
					</view>					
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 1">
				<!-- 想读 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltobottom"
				>
					<view v-for="(xiangdu,index) in xiangdus" :key="index">
						<navigator class="item" :url="'../books/bookinfo?bookid=' + xiangdu.books.book_id + '&bookname=' + xiangdu.books.book_name">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + xiangdu.books.bimg_m"></image>
							<view class="text-area">
								<text class="bookname" selectable="true" user-select="true">{{xiangdu.books.book_name}}</text>
								<text class="other" selectable="true" user-select="true">{{xiangdu.books.zuozhe}} | {{xiangdu.books.chubanshe}} </text>
								<view class="beizhu">
									<text class="riqi">{{formatDate(xiangdu.add_time)}}</text>
									<text class="memo">{{xiangdu.memo}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 2">
				<!-- 读过 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltobottom"
				>
					<view v-for="(duguo,index) in duguos" :key="index">
						<navigator class="item" :url="'../books/bookinfo?bookid=' + duguo.books.book_id + '&bookname=' + duguo.books.book_name">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + duguo.books.bimg_m"></image>
							<view class="text-area">
								<text class="bookname" selectable="true" user-select="true">{{duguo.books.book_name}}</text>
								<text class="other" selectable="true" user-select="true">{{duguo.books.zuozhe}} | {{duguo.books.chubanshe}} </text>
								<view class="beizhu">
									<view>
										<text class="riqi">{{formatDate(duguo.add_time)}}</text>
									</view>
									<text class="memo">{{duguo.memo}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import formatDate from '../../components/formatDate/formatDate.js';
	export default {
		data() {
			return {
				tab_current: 0, // 当前选项卡
				// 1想读 2在读 3读过
				readstate: '', // 读书标识状态
				uid: '', // 会员uid
				zaidus: [], // 在读
				xiangdus: [], // 想读
				duguos: [], // 读过
				zaidus_click: 0, // 标识tab选项是否选过
				xiangdus_click: 0,
				duguos_click: 0,
				username: [], // 会员信息
				zaidu_current_page: 1,
				xiangdu_current_page: 1,
				duguo_current_page: 1,				
				isLoading: false,
				refresherTriggered: false,
				refresherenabled: true
			}
		},
		// 发送给朋友
		onShareAppMessage(res) {
			//if (res.from === 'button') {
			// // 来自页面内分享按钮
			// 	console.log(res.target)
			//}
			
			// 1想读 2在读 3读过
			if(this.tab_current == 0)
			{
				this.readstate = 2;
				var zhuangtai = '在读';
			}
			if(this.tab_current == 1)
			{
				this.readstate = 1;
				var zhuangtai = '想读';
			}
			if(this.tab_current == 2)
			{
				this.readstate = 3;
				var zhuangtai = '读过';
			}
			return {
				title: '书友『' + this.username + '』' + zhuangtai + '的读书！',
				path: '/pages/userhome/readstate?readstate='+ this.readstate +'&uid=' + this.uid
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
			// 1想读 2在读 3读过
			if(this.tab_current == 0)
			{
				this.readstate = 2;
				var zhuangtai = '在读';
			}
			if(this.tab_current == 1)
			{
				this.readstate = 1;
				var zhuangtai = '想读';
			}
			if(this.tab_current == 2)
			{
				this.readstate = 3;
				var zhuangtai = '读过';
			}
			return {
				title: '夜读书的书友『' + this.username + '』' + zhuangtai + '的读书！',
				imageUrl: "https://www.yedushu.cn/images/yedushu_sharp_logo.png"
			}
		},
		onLoad(option) {
			this.isLoading = true;
			
			this.readstate = option.readstate;
			this.uid = option.uid;
			
			this.getUsername();		
			
			// 1想读 2在读 3读过
			if(option.readstate == 1)
			{
				this.tab_current = 1;
			}
			if(option.readstate == 2)
			{
				this.tab_current = 0;
			}
			if(option.readstate == 3)
			{
				this.tab_current = 2;
			}
			
			// 加载对应的选项卡的数据
			this.getReadBook(this.tab_current); 
		},
		methods: {
			refresherrefresh(){
				// console.log("自定义scroll-view下拉刷新==被触发");	
				// console.log(this.refresherTriggered);
				// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				if (this.refresherTriggered) {
					return;
				}
				this.refresherTriggered = true;
				
				//下拉触发，refresherTriggered可能不是true，要设为true
				if(!this.refresherTriggered) 
				{
					this.refresherTriggered = true;
					return;
				}
				
				this.isLoading = true;
				
				// 下拉获得第一页数据				
				if(this.tab_current == 0)
				{
					// 清空数据
					this.zaidus = [];
					// 获取第一页数据
					this.zaidu_current_page = 1;
				}				
				
				if(this.tab_current == 1)
				{
					this.xiangdus = [];
					this.xiangdu_current_page = 1;
				}
				
				if(this.tab_current == 2)
				{
					this.duguos = [];
					this.duguo_current_page = 1;
				}							
				// console.log(this.tab_current);
				this.getReadBook(this.tab_current);
			},
			refresherrestore(){
				// console.log("自定义scroll-view下拉刷新==被复位");
				this.refresherTriggered = false;
			},
			refresherabort(){
				// console.log("自定义scroll-view下拉刷新==被中止");
				this.refresherTriggered = false;
			},
			scrolltolower() {
				// console.log("自定义滚动到底部加载更多");
				this.scrolltobottom();
			},
			// 切换选项卡
			clickTab(cur){
				this.tab_current = cur;				
				
				if(cur == 0)
				{
					if(this.zaidus_click == 0)
					{
						this.getReadBook(cur);
					}
					this.zaidus_click = 1;
				}
				if(cur == 1)
				{
					if(this.xiangdus_click == 0)
					{
						this.getReadBook(cur);
					}
					this.xiangdus_click = 1;
				}
				if(cur == 2)
				{
					if(this.duguos_click == 0)
					{
						this.getReadBook(cur);
					}
					this.duguos_click = 1;					
				}				
			},
			getReadBook(cur) {
				// 获得标识的读书列表
				if(cur == 0)
				{
					this.readstate = 2;
					var page = this.zaidu_current_page;
				}
				if(cur == 1)
				{
					this.readstate = 1;
					var page = this.xiangdu_current_page;
				}
				if(cur == 2)
				{
					this.readstate = 3;
					var page = this.duguo_current_page;
				}				
				var url = 'https://www.yedushu.cn/api/readstate/' + this.readstate +'/' + this.uid + '?page=' + page;
				uni.request({
				    url: url,
				    success: (res) => {
				        // console.log(JSON.stringify(res));
						if(res.data.last_page > page)
						{
							this.isLoading = true;
						} else {
							this.isLoading = false;
						}
						// 当前以后数据连接新获取的数据
						// 1想读 2在读 3读过
						if(cur == 0)
						{
							this.zaidus = this.zaidus.concat(res.data.data);
						}
						if(cur == 1)
						{
							this.xiangdus = this.xiangdus.concat(res.data.data);
						}
						if(cur == 2)
						{
							this.duguos = this.duguos.concat(res.data.data);
						}						
						//关闭刷新图标
						this.refresherTriggered = false;
				    }
				});	
			},
			getUsername() {
				// 获得用户的信息
				uni.request({
					url: 'https://www.yedushu.cn/api/userinfo/' + this.uid,
					success: (res) => {
						// console.log(JSON.stringify(res.data));
						this.username = res.data.user_name;
						// 标题显示
						uni.setNavigationBarTitle({
						    title: this.username + '的读书'
						});
					}
				});
			},
			formatDate(riqi) {
				// 计算日期
				return formatDate(riqi);
			},
			scroll(e) {
				if (e.detail.scrollTop == 0) {
					this.refresherenabled = true;
				} else {
					this.refresherenabled = false;
				}
			},
			scrolltobottom() {
				// scroll-view滚到底,用于下拉下一页数据。
				// console.log("===加载更多===");
				// 上拉加载更多					
				if(this.tab_current == 0)
				{
					// 获得当前页面
					this.zaidu_current_page = this.zaidu_current_page + 1;	
				}				
				
				if(this.tab_current == 1)
				{
					// 获得当前页面
					this.xiangdu_current_page = this.xiangdu_current_page + 1;	
				}
				
				if(this.tab_current == 2)
				{
					// 获得当前页面
					this.duguo_current_page = this.duguo_current_page + 1;	
				}			
				// console.log(this.tab_current);
				this.getReadBook(this.tab_current);
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.tab{
	    width: 100%;
		padding: 10px 0 0 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		border-bottom: 1px solid #f3f3f3;
		position: fixed;
		z-index: 100;
		background-color: #FFFFFF;
	}
	.tabItem{
	    width: 100%;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    text-align: center;
	    color: #666666;
	}
	.active{		
	    color: #000000;
	}
	.itemcar {
		display: flex;
		padding: 35px 0 0 0; // scroll-view区域
		position: fixed; // scroll-view滚动
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.itemcar .scroll-y {
		padding: 0 10px;
		width: 100%;
		height: 100%;
	}
	.borderline {
		border-bottom: 2px solid #808080;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.fengmian {
		width: 80px;
		height: 108px;
	}
	.text-area {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 8px;
	}
	.bookname {
		font-size: 16px;
		color: #337ab7;
	}
	.other {
		font-size: 14px;
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
	.beizhu {
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
		padding: 5px 5px;
		border-radius: 5px;
		margin-top: 5px;
	}
	.beizhu .riqi {
		font-size: 13px;
		color: #555555;
	}
	.beizhu .memo {
		font-size:13px;
		color: #555555;
	}
</style>
